<template>
  <div>




    <!-- 缴纳情况页面 查询 以及 表展示 表操作 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 二层标签页 -->
      <el-tab-pane label="收费标准设置" v-if="qingkuang">
        <!-- 条件查询 -->
        <el-form ref="form" :model="form" width="100%" style="margin-right: 600px;">

          社区<el-select v-model="form.gshenhe" placeholder="幸福小区" clearable class="jiaofei">
            <el-option label="幸福小区" value="0"></el-option>
          </el-select>
          收费类型<el-select v-model="form.gshenhe" placeholder="幸福小区" clearable class="jiaofei">
            <el-option label="幸福小区" value="0"></el-option>

          </el-select>

          <!-- 按钮 -->
          <el-button type="primary" @click="findPage">查询</el-button>
          <el-button type="primary" @click="chargeConfig">收费项配置</el-button>
          <el-button type="primary" @click="AddAnExpense">+添加费用</el-button>
        </el-form><br><br>

        <!-- 缴纳情况表 展示 -->
        <el-table :data="JiaoFeiData" border style="width: 100%">
          <el-table-column prop="id" label="序号">
          </el-table-column>
          <el-table-column prop="gid" label="物业管理费">
          </el-table-column>
          <el-table-column prop="gname" label="适用小区">
          </el-table-column>
          <el-table-column prop="gdesc" label="单价">
          </el-table-column>
          <el-table-column prop="gnum" label="公式">
          </el-table-column>
          <el-table-column prop="gnum" label="状态">
          </el-table-column>
          <el-table-column label="操作" width="400px">
            <template slot-scope="scope">
              <el-button @click="Edit()" type="text">编辑</el-button>
              <el-button @click="Deactivated(scope.row.id)" type="text"
                @confirm="confirmDeactivated(scope.row.id)">停用</el-button>
              <el-button @click="Generate()" type="text">生成账单</el-button>
              <el-button @click="Delete(scope.row.id)" type="text">
                <p style="color: red;">删除</p>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[7, 10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        <!-- 生成账单按钮弹出窗 -->
        <el-dialog title="新增收费标准" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <div style="width: 100%;height: 150px;border: 1px solid black;border-color: darkgray;">
              <el-form-item label="收费项" :label-width="formLabelWidth" style="margin-left: 14px;margin-top: 14px;">
                <el-select v-model="form.region" placeholder="物业管理费">
                  <el-option label="物业管理费" value="0"></el-option>
                  <el-option label="停车费" value="1"></el-option>
                </el-select>
              </el-form-item>
              <hr>
              <el-form-item label="计算公式" :label-width="formLabelWidth" style="margin-left: 14px;margin-top: 14px;">
                <el-select v-model="form.gongshi" placeholder="单价*房屋面积">
                  <el-option label="单价*房屋面积" value="0"></el-option>
                  <el-option label="单价*户" value="1"></el-option>
                </el-select>
                <span style="margin-left: 10px;">单价</span><el-input v-model="form.name" autocomplete="off"
                  style="width: 200px;margin-left: 10px;" placeholder="请输入"></el-input><span>/元(户*月)</span>
              </el-form-item>
            </div>
            <el-form-item label="账单周期" style="margin-top: 18px;">
              <el-radio-group v-model="form.resource" style="margin-left: 20px;">
                <el-radio label="1个月" value="0"></el-radio>
                <el-radio label="2个月" value="1"></el-radio>
                <el-radio label="3个月" value="2"></el-radio>
                <el-radio label="6个月" value="3"></el-radio>
                <el-radio label="12个月" value="4"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否启用">
              <el-radio-group v-model="form.status" style="margin-left: 20px;">
                <el-radio label="启用" value="0"></el-radio>
                <el-radio label="停用" value="1"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <span>说明:</span><br>
          <span>1、请确保【智慧物业】-【房屋管理】中填写房屋面积;【智慧物业】-【住户管理】中绑定房屋户主,否则将无法生成账单。</span>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">保 存</el-button>
          </div>
        </el-dialog>
        <!-- 表操作收费项配置 -->
        <el-dialog title="添加收费项" :visible.sync="dialogConfigure">
          <el-form ref="form" :model="form" label-width="80px">
            <span style="margin-right: 400px;">收费项名称</span> <br> <br>
            <el-form-item>
              <div class="outer-box">
                <div v-for="(row, index) in rows" :key="index" class="row">
                  <el-row style="margin-bottom: 20px">
                    <el-input style="margin-left: 15px;width: 500px;" v-model="row.startBuilding" class="building-input"
                      placeholder="停车费" />
                    <i v-if="index === 0" style="color: blue;margin-left: 20px;" @click="addRow"
                      class="el-icon-plus"></i>
                    <i v-else @click="removeRow(index)" style="color: red;margin-left: 20px;"
                      class="el-icon-delete"></i>
                  </el-row>
                </div>
              </div>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogConfigure = false">取 消</el-button>
            <el-button type="primary" @click="dialogConfigure = false">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 表操作编辑钮弹出窗 -->
        <el-dialog title="编辑" :visible.sync="dialogFormVisible2">
          <el-form :model="form">

            <el-form-item label="选择平台类型" :label-width="formLabelWidth"
              style="margin-left: 14px;margin-top: 14px;margin-left: 30px;">
              <el-select v-model="form.region" placeholder="物业管理费" style="width: 600px;">
                <el-option label="中移聚合支付" value="0"></el-option>
                <el-option label="农信聚合支付" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商户名称" style="margin-left: 60px;">
              <el-input v-model="form.name" placeholder="XXXX公司" style="width: 600px;"></el-input>
            </el-form-item>
            <el-form-item label="商户号" style="margin-left: 74px;">
              <el-input v-model="form.name" placeholder="7777777777" style="width: 600px;"></el-input>
            </el-form-item>
            <el-form-item label="联系手机号" :label-width="formLabelWidth"
              style="margin-left: 14px;margin-top: 14px;margin-left: 46px;">
              <el-select v-model="form.phone" placeholder="13899997777" style="width: 600px;">
                <el-option label="1859697545" value="0"></el-option>
                <el-option label="18211748969" value="1"></el-option>
              </el-select>
            </el-form-item>
            <span style="margin-left: 130px;">改手机号用于缴费(物业费、水费、电费等)异常处理</span><br><br><br>

            <el-form-item label="是否启用" style="margin-left: 45px;">
              <el-radio-group v-model="form.status" style="margin-left: 20px;">
                <el-radio label="启用" value="0"></el-radio>
                <el-radio label="停用" value="1"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible2 = false">确定</el-button>
          </div>
        </el-dialog>


        <!-- 表操作生成账单弹出框 -->
        <el-dialog :title="title" :visible.sync="dialogTableVisibleplmoney" width="1000px" append-to-body>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span style="line-height: 40px;margin-left: 8px;"><span style="color: red;">*</span>选择房屋</span>
                <el-tree :data="data" show-checkbox node-key="id" :props="defaultProps"
                  style="background-color: #f2f2f2;">
                </el-tree>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content bg-purple">
                <span style="line-height: 40px;margin-left: 10px;"><span style="color: red;">*</span>选择费项</span>
                <br>
                <span style="color: red;margin-left: 18px;line-height: 30px;">注意!如果该房屋已经生成过账单,重复生成将覆盖未缴纳账单</span>
                <el-table ref="multipleTable" :data="tableData" height="420" border style="width: 100%"
                  @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="费用名称">
                  </el-table-column>
                  <el-table-column prop="name" label="单价">
                  </el-table-column>
                  <el-table-column prop="address" label="计算公式">
                  </el-table-column>
                  <el-table-column prop="address" label="账单 周期">
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
          <el-form-item label="账单起止时间">
            <el-col :span="11">
              账单起止时间<el-date-picker type="date" placeholder="请选择开始时间" v-model="form.date1"
                style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker placeholder="请选择结束时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>

          <div style="text-align: right;margin-right: 50px;margin-top: 20px;">
            <el-button @click="dialogTableVisibleplmoney = false">取消</el-button>
            <el-button type="primary" @click="dialogTableVisibleplmoney = false">确定</el-button>
          </div>
        </el-dialog>


      </el-tab-pane>

      <!-- 详情 交易记录标签页 -->
      <el-tab-pane label="账单消息推送" name="second">

        <span style="margin-right: 90%;">账单消息推送设置</span>

        <el-form ref="form" :model="form" label-width="100px" style="margin-top: 2%;">
          <el-form-item label="社区" style="width: 400px;">
            <el-input v-model="form.name" placeholder="阳光城市"></el-input>
          </el-form-item>

          <el-form-item label="推送日期 " style="width: 400px;">
            <el-input v-model="form.name" placeholder="1"></el-input>
          </el-form-item>

          <span style="margin-right:50%;">默认每月1日推送账单消息</span>
          <el-form-item label="推送对象" style="width: 400px;">
            <el-select v-model="form.region" placeholder="请选择推送对象">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="活动性质" style="width: 400px;">
            <el-checkbox v-model="checked1">短信</el-checkbox>
            <el-checkbox v-model="checked2">微信公共号</el-checkbox>
          </el-form-item>

          <hr>
          <el-form-item style="margin-right: 80%;">
            <el-button>取消</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>




  </div>
</template>

<script>
export default {
  data() {
    return {

      // 添加费用弹出窗
      dialogFormVisible: false,
      // 编辑弹出窗
      dialogFormVisible2: false,
      // 收费项配置弹出窗
      dialogConfigure: false,
      form: {},
      tableData: [],
      pageNum: 1,
      pageSize: 7,
      total: 0,
      pojo: {},
      // 收费标准设置设置成true
      qingkuang: true,
      // 收费标准设置表展示
      JiaoFeiData: [],

      // 表操作生成账单弹出框
      dialogTableVisibleplmoney: false,
      title: '',

      // 初始化字段
      JiaoFeiData: [
        { id: 1, gid: 101, gname: '小区 A', gdesc: '2.5 元/平方米', gnum: '面积*2.5', status: '启用' },
        { id: 2, gid: 102, gname: '小区 B', gdesc: '3 元/平方米', gnum: '面积*3', status: '启用' },
        { id: 3, gid: 103, gname: '小区 C', gdesc: '2 元/平方米', gnum: '面积*2', status: '停用' },
        { id: 4, gid: 104, gname: '小区 D', gdesc: '1.8 元/平方米', gnum: '面积*1.8', status: '启用' },
        { id: 5, gid: 105, gname: '小区 E', gdesc: '2.2 元/平方米', gnum: '面积*2.2', status: '启用' }
      ],
      rows: [{ id: "1", startBuilding: "", endBuilding: "" }],
    };

  },
  methods: {


    //收费项配置第一个页面
    addRow() {
      const newRow = {
        id: this.rows.length + 1,
        startBuilding: "",
        endBuilding: "",
      };
      this.rows.push(newRow);
      this.dialogConfigure = true
    },
    removeRow(index) {
      this.rows.splice(index, 1);
    },

    // 表操作删除
    Delete(billId) {
      this.$confirm('确认删除此费用? ', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定按钮的操作
        this.$message.success('删除成功!');
      }).catch(() => {
        // 点击取消按钮的操作
        this.$message.info('已取消操作');
      });
    },
    // 表操作停用

    Deactivated(billId) {
      this.$confirm('确认停用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定按钮的操作
        this.$message.success('停用成功!');
      }).catch(() => {
        // 点击取消按钮的操作
        this.$message.info('已取消操作');
      });
    },
    // 表操作生成账单
    Generate() {
      this.dialogTableVisibleplmoney = true;
      this.title = '生成账单';
    },
    // 收费项配置按钮

    chargeConfig() {
      this.dialogConfigure = true
    },
    // 表操作编辑
    Edit() {
      this.dialogFormVisible2 = true;
    },
    // 添加费用按钮弹出窗
    AddAnExpense() {
      this.dialogFormVisible = true;

    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.findPage();
    },

  },
  //在实例化之后

  created() {
  },

};
</script>

<style>
.margin {
  width: 200px;
}

.jiaofei {
  width: 150px;
}

.box {
  margin-top: 1px;
  height: 100px;
  width: 100%;
}
</style>
